<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    svg {
      position: absolute;
      top: -4000px;
      left: -4000px;
    }
    #gooey-button {
      padding: 1rem;
      font-size: 2rem;
      border: 0;
      color: #0c1016;
      filter: url("#gooey");
      position: relative;
      background-color: #00ff80;
    }
    #gooey-button:focus {
      outline: 0;
    }
    #gooey-button .bubbles {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    #gooey-button .bubbles .bubble {
      background-color: #00ff80;
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: -1;
    }
    #gooey-button .bubbles .bubble:nth-child(1) {
      left: 13px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-1 3.02s infinite;
      animation: move-1 3.02s infinite;
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    #gooey-button .bubbles .bubble:nth-child(2) {
      left: 18px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-2 3.04s infinite;
      animation: move-2 3.04s infinite;
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }
    #gooey-button .bubbles .bubble:nth-child(3) {
      left: 71px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-3 3.06s infinite;
      animation: move-3 3.06s infinite;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    #gooey-button .bubbles .bubble:nth-child(4) {
      left: 35px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-4 3.08s infinite;
      animation: move-4 3.08s infinite;
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }
    #gooey-button .bubbles .bubble:nth-child(5) {
      left: 34px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-5 3.1s infinite;
      animation: move-5 3.1s infinite;
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }
    #gooey-button .bubbles .bubble:nth-child(6) {
      left: 36px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-6 3.12s infinite;
      animation: move-6 3.12s infinite;
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }
    #gooey-button .bubbles .bubble:nth-child(7) {
      left: 91px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-7 3.14s infinite;
      animation: move-7 3.14s infinite;
      -webkit-animation-delay: 1.4s;
      animation-delay: 1.4s;
    }
    #gooey-button .bubbles .bubble:nth-child(8) {
      left: 62px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-8 3.16s infinite;
      animation: move-8 3.16s infinite;
      -webkit-animation-delay: 1.6s;
      animation-delay: 1.6s;
    }
    #gooey-button .bubbles .bubble:nth-child(9) {
      left: 57px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-9 3.18s infinite;
      animation: move-9 3.18s infinite;
      -webkit-animation-delay: 1.8s;
      animation-delay: 1.8s;
    }
    #gooey-button .bubbles .bubble:nth-child(10) {
      left: 49px;
      width: 25px;
      height: 25px;
      -webkit-animation: move-10 3.2s infinite;
      animation: move-10 3.2s infinite;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
    }
    @-webkit-keyframes move-1 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -109px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-1 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -109px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-2 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -76px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-2 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -76px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-3 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -125px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-3 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -125px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-4 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -66px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-4 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -66px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-5 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -74px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-5 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -74px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-6 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -122px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-6 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -122px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-7 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -80px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-7 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -80px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-8 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -89px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-8 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -89px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-9 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -72px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-9 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -72px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes move-10 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -120px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
    @keyframes move-10 {
      0% {
        transform: translate(0, 0);
      }
      99% {
        transform: translate(0, -120px);
      }
      100% {
        transform: translate(0, 0);
        opacity: 0;
      }
    }
  </style>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="gooey">
          <feGaussianBlur
            in="SourceGraphic"
            stdDeviation="5"
            result="blur"
          ></feGaussianBlur>
          <feColorMatrix
            in="blur"
            type="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="highContrastGraphic"
          ></feColorMatrix>
          <feComposite
            in="SourceGraphic"
            in2="highContrastGraphic"
            operator="atop"
          ></feComposite>
        </filter>
      </defs>
    </svg>
    <button id="gooey-button">
      苏苏哇哈哈哈
      <span class="bubbles"
        ><span class="bubble"></span><span class="bubble"></span
        ><span class="bubble"></span><span class="bubble"></span
        ><span class="bubble"></span><span class="bubble"></span
        ><span class="bubble"></span><span class="bubble"></span
        ><span class="bubble"></span><span class="bubble"></span
      ></span>
    </button>
  </body>
</html>
